<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="box" class="one two three" title="hello" ad = "as">
        <span>123</span>
    </div>
</body>
<script>
    var box = document.getElementById("box");
    console.dir(box);

    console.log(box.id);
    console.log(box.innerHTML);
    console.log(box.innerText);
    console.log(box.className);
    box.className = "123"
    console.log(box.title);
    box.style.cssText =`background-color: red;`;
    // box.style.width = "200px";
    // box.style.height = "200px";
    // box.style.background = "red";


    function getStyle(ele,attr){
        if(window.getComputedStyle){  //取值 判断方法是否存在   存在:常规浏览器
            return window.getComputedStyle(ele)[attr];
        }else{  //不存在 => IE
            return ele.currentStyle[attr];
        }
    }

    console.log(getStyle(box,"width"));
</script>
</html>